<template>
    <div class="create-order">
        <s-header title="生成订单"></s-header>
        <div class="address-wrap">
            <div class="name" @click="goTo">
                <span>{{ address.userName }}</span>
                <span>{{ address.userPhone }}</span>
            </div>
            <div class="address">
                {{ address.provinceName }} {{ address.cityName }} {{ address.regionName }} {{ address.detailAddress }}
            </div>
            <van-icon class="arrow" name="arrow" />
        </div>
        <div class="good">
            <div class="good-item"  v-for="(item,index) in cartList"  :key="index">
                <div class="good-img">
                    <img
                        src="http://img14.360buyimg.com/n5/s54x54_jfs/t1/104940/8/20590/50876/61ce7d83E1b58de94/78f3638b0f3a333f.jpg"
                        alt=""
                    />
                </div>
                <div class="good-desc">
                    <div class="good-title">
                        <span>{{ item.goodsName }}</span>
                        <span>x{{ item.goodsCount }}</span>
                    </div>
                    <div class="good-btn">
                        <div class="price">￥{{ item.sellingPrice }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pay-wrap">
            <div class="price">
                <span>商品金额</span>
                <span>￥{{total}}</span>
            </div>
            <van-button class="pay-btn"  color="#111111" @click="PAYSHOW" type="primary" block>立即支付</van-button>
        </div>

        <van-popup
            closeable
            :close-on-click-overlay="false"
            v-model="showPay"
            position="bottom"
            :style="{ height:'30%'}"
            @close="close"
             v-if="a"
        >
            <div :style="{width:'90%',margin:'0 auto',padding:'50px 0'}">
                <van-button

                    :style="{marginBottom: '10px' }"
                    color="#456655"
                    block
                    @click="payOrder(1)"
                >支付宝</van-button>
                <van-button color="#45asd1" block @click="payOrder(2)">微信支付</van-button>
            </div>
        </van-popup>

        <van-overlay :show="show" @click="show=false" to="success">       
            <div class="block" >
                <div v-if="!a">
                    <!-- 密码输入框 -->
                    <van-password-input
                    :value="value"
                    :focused="showKeyboard"
                    @focus="showKeyboard = true"
                    />
                    <!-- 数字键盘 -->
                    <van-number-keyboard
                    v-model="value"
                    :show="showKeyboard"
                    @blur="showKeyboard = false"
                    />
                </div>
            </div>
        </van-overlay>

    </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader';
import { Toast,Popup } from 'vant';
import { getByCartItemIds } from '../service/cart'
import { setLocal, getLocal } from '@/common/js/utils'
import { getAddressDetail,getDefaultAddress } from '@/service/address';

export default {
    components:{
        sHeader,
    },
    data(){
        return {
            show:false,
            a:true,
            value:'123',
            showKeyboard:true,
            cartList:[],
            address:{},
            showPay:false,
            orderNo:'',
            cartItemIds:[],
        }
    },
    mounted() {
        this.init()
    },
    computed:{
        total:function(){
            let sum = 0
            this.cartList.forEach(item =>{
                sum += item.goodCount * item.sellingPrice
            })
            return sum
        }
    },
    methods: {
        close(){
            Toast.loading;
            this.$router.push({ path:'' });
        },
        async init() {
            Toast.loading({ message: '加载中...', forbidClick: true });
            // 获取查询参数内的 id
            const { addressId, cartItemIds } = this.$route.query;
            // id 会本地存储，如果查询字符串 id 优先获取，若没有则获取本地存储的 ids
            const _cartItemIds = cartItemIds ? JSON.parse(cartItemIds) : JSON.parse(getLocal('cartItemIds'))
            setLocal('cartItemIds', JSON.stringify(_cartItemIds))
            const { data: list } = await getByCartItemIds({ cartItemIds: _cartItemIds.join(',') })
            // addressId 有的情况下，优先获取 addressI，否则获取默认地址接口
            const { data: address } = addressId ? await getAddressDetail(addressId) : await getDefaultAddress()
            if (!address) {
                this.$router.push({ path: 'address' })
                return;
            }
            this.cartList = list
            this.address = address
            Toast.clear()
        },
        async createOrder (){
            const params = {
                addressId:this.address.addressId,
                cartItemIds:this.cartList.map((item)=>item.cartItemId),
            };
        },
        PAYSHOW(){
                        this.showPay = true
        },
        async payOrder(type){
            Toast.loading;
            this.a = false;
            this.show=true
            // this.$router.push({ path:'' });
        },
        goTo () {
            this.$router.push({ path: `address?cartItemIds=${JSON.stringify(this.cartItemIds)}` })
        }
    }
}
</script>


<style lang="less" scoped>
@import "../common/style/mixin";
.create-order{
    background-color: #f9f9f9;
    .address-wrap{
        margin-bottom: 20px;
        background: #fff;
        position: relative;
        margin-top: 44px;
        font-size: 14px;
        padding: 15px;
        color: #151b77;
        .name,
        .address{
            margin: 10px 0 ;
        }
        .arrow{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translate(-50%);
            font-size: 20px;
        }
        &::before{
            position:absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            background: -webkit-repeating-linear-gradient(
                135deg,
                #ff6cff 0 ,
                #ff6cff 20%,
                transparent 0 ,
                transparent 25%,
                #1989fa 0,
                #1989fa 45%,
                transparent 0 ,
                transparent 50%,
            );
            background: repeating-linear-gradient(
                -45deg,
                #ff6c6c 0 ,
                #ff6c6c 20%,
                transparent 0 ,
                transparent 25%,
                #1989fa 0,
                #1989fa 45%,
                transparent 0,
                transparent 50%,
            );
            background-size: 80px ;
            content: '';
        }
    }
    .good {
        margin-bottom: 120px;
    }
    .good-item {
        padding: 10px;
        background: #fff;
        display: flex;
        .good-img {
            img{
                .wh(100px , 100px);
            }
        }
        .good-desc{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            padding: 20px;
            .good-title{
                display: flex;
                justify-content: space-between;  
            }
            .good-btn{
                display: flex;
                justify-content: space-between;
                .price{
                    font-size: 16px;
                    color: red;
                    line-height: 28px;
                }
                .van-icon-delete{
                    font-size: 20px;
                    margin-top: 4px;
                }
            }
        }
    }
    .pay-wrap{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background:#fff ;
        padding: 10px 0 ; 
        padding-bottom:50px ;
        border-top:1px solid #e9e9e9  ;
        >div{
            display: flex;
            justify-content: space-between;
            padding: 0 5%;
            margin: 10px 0;
            font-size: 14px;
            span:nth-child(2){
                color: red;
                font-size: 18px;
            }
        }
        .pay-btn{
            position: fixed;
            bottom: 7px;
            right: 0;
            left: 0;
            width: 90%;
            margin: 0  auto;
        }
    }
}
.van-password-input{
    margin-top: 200px;
}
</style>